<template>
    <!-- //组件的结构 -->
    <div class="demo">    
        <h1>学校{{name}}{{address}}</h1>
    </div>
</template>

<script>
    // 组件交互的关键代码
    // 分别暴露
    // 引入用import {school} from 'School'
    // export const school = Vue.extend({
    // const school = Vue.extend({
    //     data(){
    //         return {
    //             name:'zzz1',
    //             address:"zzzzzzzzfffffff"
    //         }
    //     },
    // }) 
    //统一暴露
    // 引入用import {school} from 'School'
    // export {school}
    // 默认暴露(一般用默认暴露)，因为写import的时候最简单。ES6语法
    // 引入用import school from 'School'
    // export default school
    // 可以直接写成
    // export default Vue.extend({
    //     data(){
    //         return {
    //             name:'zzz1',
    //             address:"zzzzzzzzfffffff"
    //         }
    //     },
    // }) 
    // 可以直接简写成
    export default {
        //注册的组件名。名称要与vue文件保持一致
        name:"School",
        data(){
            return {
                name:'zzz1',
                address:"zzzzzzzzfffffff"
            }
        },
    }
</script>

<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>
